<template>
	<view>

		<view class="hede_bm" v-if="!is_getLocation&&platform=='android'">
			<view class="" :style="'height: ' + statusBar + 'px;'">

			</view>
			<view class="" style="display: flex;align-items: center;justify-content: space-between;">
				<view class="" style="color: #fff;flex:1;font-size: 12px;">
					定位服务未开启
					<view class="" style="color: #fff;font-size: 12px;">
						开启后，将根据所在地区提供所项目、服务与价格信息。
					</view>
				</view>
				<view class="but_1" @click="getCityListFun">
					去开启
				</view>
			</view>

		</view>


		<view class="index-header">
			<view class="city-view" @click="switchCity">
				<u-icon name="map-fill" color="#fff" size="30" class="margin-right5"></u-icon>
				{{myCityObj.value?myCityObj.value:''}}
				<u-icon name="arrow-down-fill" color="#fff" size="16" class="margin-left5"></u-icon>
			</view>
			<view class="header-right" v-if="appleShow">
				<image src="../../static/images/duihuan.png" mode="heightFix" class="list"
					@click="$utils.navigateTo('/index/exchange')"></image>
			</view>
		</view>
		<u-swiper height="500" class="banner" mode="none" radius="0" imgMode="widthFix" bg-color="none"
			:list="bannerList"></u-swiper>
		<view class="my-content">
			<view class="index-type">
				<view v-for="(item3,index3) in catList">
					<view class="list" @click="$utils.navigateTo('/compute/list',{id:item3.id})">
						<view class="img">
							<image :src="item3.img" mode="heightFix"></image>
						</view>
						<view class="title">{{item3.cat}}</view>
						<view class="txt">{{item3.subcat}}</view>
					</view>
				</view>
			</view>
			<view class="news">
				<u-notice-bar type="none" mode="vertical" :list="newsList"></u-notice-bar>
			</view>
			<view class="ad-title">热门活动</view>
			<view class="ad">
				<image @click="adClick(item.links)" mode="widthFix" v-for="(item, index) in adList" :key="index"
					:src="item.src"></image>
			</view>
		</view>

		<!-- 送会员活动 -->
		<template v-if="appleShow">
			<view class="fixed-bg" v-if="haveCoupon">
				<view class="fixed-pop">
					<image @click="getvip" mode="widthFix" src="../../static/images/activity/activity-pop.png"></image>
				</view>
			</view>
			<view class="fixed-icon" v-if="!haveCoupon && haveCouponIcon">
				<image @click="$utils.navigateTo('/activity/share-vip')" mode="widthFix"
					src="../../static/images/activity/activity-icon.png"></image>
			</view>
		</template>
	</view>
</template>

<script>
	//import mixin from "@/libs/mixin.js";
	import {
		getCityList
	} from '@/api/compute.js'
	import {
		getIndexData,
		isloginlog
	} from '@/api/index.js'
	export default {
		//mixins: [mixin],
		data() {
			return {
				cityList: [],
				myCityObj: {},
				bannerList: ['/static/images/banner.jpg'],
				newsList: [],
				adList: [],
				catList: [],
				haveCoupon: false,
				haveCouponIcon: true,
				show: 0,
				pwd: '',
				appleShow: true,
				is_getLocation: false,
				statusBar: 0,
				platform: ''
			}
		},
		onLoad() {



			//检测当前平台
			uni.getSystemInfo({
				success: (res) => {
					// this.compareVersion(e.SDKVersion, '2.5.0')
					let statusBar = 0 //状态栏高度
					let customBar = 0 // 状态栏高度 + 导航栏高度  
					let navbar = 0 // 自定义标题与胶囊对齐高度

					var e = res;
					// #ifdef MP
					statusBar = e.statusBarHeight
					customBar = e.statusBarHeight + 45
					if (e.platform === 'android') {
						this.$store.commit('SET_SYSTEM_IOSANDROID', false)
						customBar = e.statusBarHeight + 50
					}
					// #endif


					// #ifdef MP-WEIXIN
					statusBar = e.statusBarHeight
					const custom = wx.getMenuButtonBoundingClientRect()
					customBar = custom.bottom + custom.top - e.statusBarHeight

					navbar = (custom.top - e.statusBarHeight) * 2 + custom.height
					// #endif


					// #ifdef MP-ALIPAY
					statusBar = e.statusBarHeight
					customBar = e.statusBarHeight + e.titleBarHeight
					// #endif


					// #ifdef APP-PLUS
					console.log('app-plus', e)
					statusBar = e.statusBarHeight
					customBar = e.statusBarHeight + 45
					// #endif


					// #ifdef H5
					statusBar = 0
					customBar = e.statusBarHeight + 45
					// #endif
					console.log("statusBar: " + JSON.stringify(statusBar));
					this.statusBar = statusBar;
					this.platform = res.platform;


					//如果是安卓则启动安卓更新
					if (res.platform == "android") {
						this.AndroidCheckUpdate();
					}
					//如果是苹果隐藏活动
					if (res.platform == "ios" || res.platform == "mac") {
						this.appleShow = false;
					}
				}
			});
			this.is_getLocation = uni.getStorageSync('is_getLocation');
			// 获取城市列表


			if (!this.$store.state.app.city.value) {
				if (uni.getStorageSync('is_getLocation') == true || this.platform == 'ios') {
					this.getCityListFun();
				}
			};
			//首页数据
			this.getIndexData();

		},
		onShow() {
			if (this.$store.state.app.city.value) {
				this.myCityObj = this.$store.state.app.city;
			}
			uni.setStorage({
				key: 'addr',
				data: this.$store.state.app.city.value
			});
			if (this.$store.state.app.token) {
				this.init_login();
			}
		},
		methods: {
			//安卓自动更新
			AndroidCheckUpdate() {
				var _this = this;
				uni.request({
					url: 'http://www.txzh.com.cn/version.txt',
					method: 'GET',
					success: res => {
						uni.showToast({
							title: res.data,
							mask: false,
							duration: 5000,
							icon: "none"
						});
						if (res.data > this.version) {
							if (plus.networkinfo.getCurrentType() != 3) {
								uni.showToast({
									title: '有新的版本发布，检测到您目前非Wifi连接，为节约您的流量，程序已停止自动更新，将在您连接WIFI之后重新检测更新。',
									mask: false,
									duration: 5000,
									icon: "none"
								});
								return;
							}
							uni.showToast({
								title: '有新的版本发布，检测到您目前为Wifi连接，程序已启动自动更新。新版本下载完成后将自动弹出安装程序。',
								mask: false,
								duration: 5000,
								icon: "none"
							});
							var dtask = plus.downloader.createDownload("http://www.txzh.com.cn/app.apk", {},
								function(d, status) {
									// 下载完成  
									if (status == 200) {
										plus.runtime.install(plus.io.convertLocalFileSystemURL(d
											.filename), {}, {}, function(error) {
											uni.showToast({
												title: '安装失败',
												icon: 'none'
											});
										})
									} else {
										uni.showToast({
											title: '更新失败',
											icon: 'none'
										});
									}
								});
							dtask.start();
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
			init_login() {
				isloginlog({
					token: this.$store.state.app.token
				}).then(res => {
			
					if (res.list.count > 0) {
						var count = res.list.count.toString()
						uni.setTabBarBadge({
							index: 2,
							text: count
						})
						return
					}
					uni.hideTabBarRedDot({
						index: 2
					})

				}).catch(err => {

				});
			},
			// 获取城市列表
			getCityListFun() {
				console.log('.......')
				getCityList().then(res => {

					this.cityList = res.citys;
					this.getLocation();
				}).catch(err => {
					uni.showToast({
						title: err.msg,
						icon: 'none'
					})
				});
			},
			// 获取首页数据
			getIndexData() {
				getIndexData({
					token: this.$store.state.app.token
				}).then(res => {
					this.adList = res.list.adList;
					this.newsList = res.list.newsList;
					this.catList = res.list.catList;
					this.haveCoupon = res.list.haveCoupon;
				}).catch(err => {
					uni.showToast({
						title: err.msg,
						icon: 'none'
					})
				});
			},
			// 从手机上获取定位城市信息
			getLocation() {
				var self = this;


				uni.getLocation({
					type: 'gcj02',
					geocode: true,
					success: function(res) {
						console.log("res: " + JSON.stringify(res));
						self.is_getLocation = true;
						uni.setStorage({
							key: 'is_getLocation',
							data: true
						});
						console.log('------------')
						console.log(res)
						if (res.address && res.address.province) {
							self.cityList.forEach((item, index) => {
								if (item.value.indexOf(res.address.province) > -1) {
									self.myCityObj = item;

									self.$store.commit('SELECT_CITY', item);
									/*uni.showToast({
										title: res.address.province,
										icon:'none'
									});*/
								}
							});
						} else {
							//默认选择北京
							self.$store.commit('SELECT_CITY', self.cityList[0]);
							self.myCityObj = self.cityList[0];
						};
					},
					fail: function(res) {
						console.log("res: " + JSON.stringify(res));
						uni.showToast({
							title: '获取当前定位城市失败，默认选择北京市！',
							icon: 'none'
						});
						self.$store.commit('SELECT_CITY', self.cityList[0]);
						self.myCityObj = self.cityList[0];
					}
				});
			},
			// 左上角点击切换城市
			switchCity() {
				this.$utils.navigateTo('/index/city-list', {
					fromUrl: '/index/index'
				});
			},
			// 我的关注提示
			tipMsg() {
				uni.showToast({
					title: '即将上线，敬请期待！',
					icon: 'none'
				});
			},
			// 热门活动点击跳转
			adClick(linkUrl) {
				//this.$utils.reLaunch(linkUrl);
				this.$utils.navigateTo(linkUrl);
				setTimeout(() => {
					this.$utils.switchTab(linkUrl);
				}, 500);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.hede_bm {
		position: fixed;
		width: 750rpx;
		background-color: rgba(0, 0, 0, 0.6);
		top: 0;

		z-index: 999;

		padding: 5px 20px;

	}

	.index-header {
		position: absolute;
		top: 60rpx;
		z-index: 2;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 30rpx;
		width: 100%;
		box-sizing: border-box;

		.city-view {
			border-radius: 30rpx;
			font-size: 22rpx;
			background: rgba(0, 0, 0, .2);
			padding: 10rpx 20rpx;
			color: #fff;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.header-right {
			.list {
				height: 1.3rem;
			}
		}
	}

	.banner {
		width: 100%;
	}

	.but_1 {
		font-size: 14px;
		background-color: #FFA500;
		width: 60px;
		height: 25px;
		justify-content: center;
		display: flex;
		align-items: center;
		border-radius: 5px;
		color: #fff;
	}

	.my-content {
		margin-top: -100rpx;
		position: relative;
		z-index: 1;

		.index-type {
			background: #fff;
			box-shadow: 0 0 30rpx rgba(0, 0, 0, .2);
			text-align: center;
			overflow: hidden;
			border-radius: 20rpx;
			padding: 30rpx 0 20rpx;

			.list {
				width: 33.3%;
				float: left;

				.img image {
					height: 70rpx;
				}

				.title {
					font-size: 28rpx;
				}

				.txt {
					height: 80rpx;
					margin: 8rpx 10rpx 0;
					font-size: 22rpx;
					color: #999;
				}
			}
		}

		.news {
			margin-top: 30rpx;
			background: #f9f9f9;
			border-radius: 20rpx;
		}

		.ad-title {
			margin-top: 25rpx;
			font-size: 30rpx;
		}

		.ad {
			margin-top: 15rpx;

			image {
				width: 100%;
				margin-bottom: 15rpx;
				border-radius: 20rpx;
			}
		}
	}

	.fixed-bg {
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		z-index: 998;
		background: rgba(0, 0, 0, .15);
	}

	.fixed-pop {
		position: fixed;
		left: 0;
		right: 0;
		top: 50%;
		z-index: 999;
		width: 100%;
		transform: translateY(-50%);
		text-align: center;

		image {
			width: 60%;
		}
	}

	.fixed-icon {
		position: fixed;
		right: 0;
		bottom: 15%;
		z-index: 999;

		image {
			width: 90rpx;
		}
	}
</style>